<template>
  <div class="dashboard">
    <div class="page-header">
      <h2>系统概览</h2>
      <p>欢迎使用家政服务管理系统</p>
    </div>
    
    
    <div class="stats-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon user-icon">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stats.totalUsers }}</h3>
                <p>用户总数</p>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon order-icon">
                <el-icon><Document /></el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stats.totalOrders }}</h3>
                <p>订单总数</p>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon service-icon">
                <el-icon><Setting /></el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stats.totalServices }}</h3>
                <p>服务总数</p>
              </div>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon staff-icon">
                <el-icon><Avatar /></el-icon>
              </div>
              <div class="stat-info">
                <h3>{{ stats.totalStaff }}</h3>
                <p>服务人员</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    
    <div class="quick-actions">
      <h3>快捷操作</h3>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card class="action-card" @click="$router.push('/orders')">
            <div class="action-content">
              <el-icon><Plus /></el-icon>
              <h4>创建订单</h4>
              <p>快速创建新的服务订单</p>
            </div>
          </el-card>
        </el-col>
        
        <el-col :span="8">
          <el-card class="action-card" @click="$router.push('/services')">
            <div class="action-content">
              <el-icon><Setting /></el-icon>
              <h4>家政服务管理</h4>
              <p>管理家政服务项目</p>
            </div>
          </el-card>
        </el-col>
        
        <el-col v-if="$store.getters.userType === 1" :span="8">
          <el-card class="action-card" @click="$router.push('/users')">
            <div class="action-content">
              <el-icon><User /></el-icon>
              <h4>用户管理</h4>
              <p>管理系统用户</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import { ElMessage } from 'element-plus'

export default {
  name: 'Dashboard',
  data() {
    return {
      stats: {
        totalUsers: 0,
        totalOrders: 0,
        totalServices: 0,
        totalStaff: 0
      },
      loading: false
    }
  },
  mounted() {
    this.loadDashboardData()
  },
  methods: {
    async loadDashboardData() {
      this.loading = true
      try {
        const response = await api.get('/api/system/stats')
        if (response.success) {

          this.stats = {
            totalUsers: response.data.userCount || response.data.totalUsers || 0,
            totalOrders: response.data.orderCount || response.data.totalOrders || 0,
            totalServices: response.data.serviceCount || response.data.totalServices || 0,
            totalStaff: response.data.reviewCount || response.data.totalStaff || 0
          }
        } else {
          ElMessage.warning('加载统计数据失败')
        }
      } catch (error) {
        console.error('加载Dashboard数据失败:', error)
        ElMessage.error('加载数据失败，请刷新重试')
      } finally {
        this.loading = false
      }
    },
    
    refreshData() {
      this.loadDashboardData()
    }
  }
}
</script>

<style scoped>
.dashboard {
  padding: 0;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 28px;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.stats-cards {
  margin-bottom: 30px;
}

.stat-card {
  height: 120px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stat-icon {
  font-size: 40px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: white;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.order-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.service-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.staff-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info h3 {
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 5px 0;
  color: #303133;
}

.stat-info p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.quick-actions {
  margin-bottom: 30px;
}

.quick-actions h3 {
  margin-bottom: 20px;
  color: #303133;
}

.action-card {
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.action-content {
  text-align: center;
  padding: 20px;
}

.action-content .el-icon {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 15px;
}

.action-content h4 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 16px;
}

.action-content p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}
</style> 